<template>
	<view class="bi-chart-quota" :class="{'is-last': isLast, 'is-vertical': isVertical}">
		<view class="bi-chart-quota__label">{{ label }}</view>
		<view class="bi-chart-quota__target">
			<text class="bi-chart-quota__value">{{ value }}</text>
			<text class="bi-chart-quota__unit" v-if="unit">{{ unit }}</text>
		</view>
	</view>
</template>

<script>
import { unique } from '@/utils/string.js'

export default {
	name: 'BiChartQuota',
	inject: {
		BiChartQuotaGroup: {
			default: null
		}
	},
	props: {
		label: {
			type: String
		},
		value: {
			type: [String, Number]
		},
		unit: {
			type: String
		}
	},
	computed: {
		isVertical () {
			return this.BiChartQuotaGroup && this.BiChartQuotaGroup.dir === 'vertical'
		},
		isLast () {
			return this.BiChartQuotaGroup && this.BiChartQuotaGroup.isLastItem(this.id)
		}
	},
	created () {
		this.id = unique()
		this.BiChartQuotaGroup && this.BiChartQuotaGroup.addItem(this.id)
	},
	beforeDestroy () {
		this.BiChartQuotaGroup && this.BiChartQuotaGroup.removeItem(this.id)
	}
}
</script>

<style lang="less">
.bi-chart-quota{
	line-height: 1.7em;
	&.is-vertical {
		&:not(.is-last) {
			padding-bottom: 8px;
		}
	}
}
.bi-chart-quota__label{
	color: #999;
	font-size: 12px;
	white-space: nowrap;
}
.bi-chart-quota__target{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.bi-chart-quota__value{
	font-size: 20px;
	font-weight: bold;
}
.bi-chart-quota__unit{
	color: #999999;
	margin-left: 4px;
}
</style>